{# Stalker Pyramid a Web Base Production Asset Management System
 Copyright (C) 2009-2014 Erkan Ozgur Yilmaz
 
 This file is part of Stalker Pyramid.
 
 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation;
 version 2.1 of the License.

 This library is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public
 License along with this library; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
#}
<div class='dijitDialogPaneContentArea'>
    <form id='status_form'>
        <table style='width:100%;'>

            {# NAME #}
            <tr>
                <td class='label_column'>
                    <label for='status_name'>
                        Name
                    </label>
                </td>
                <td class='input_column'>
                    <input id='status_name'>
                </td>
            </tr>

            {# CODE #}
            <tr>
                <td class='label_column'>
                    <label for='status_code'>
                        Code
                    </label>
                </td>
                <td class='input_column'>
                    <input id='status_code'>
                </td>
            </tr>

            {# FG Color #}
            <tr>
                <td class='label_column'>
                    <label for='status_fg_color'>
                        FG Color
                    </label>
                </td>
                <td class='input_column'>
                    <input id='status_fg_color'>
                </td>
            </tr>

            {# BG Color #}
            <tr>
                <td class='label_column'>
                    <label for='status_bg_color'>
                        BG Color
                    </label>
                </td>
                <td class='input_column'>
                    <input id='status_bg_color'>
                </td>
            </tr>

        </table>
    </form>
</div>

<div class='dijitDialogPaneActionBar'>
    <button id='status_submit_button'></button>
    <button id='status_cancel_button'></button>
</div>

<script type='text/javascript'>
    require([
        'dojo/store/Memory',

        'dijit/form/Form',
        'dijit/form/ValidationTextBox',
        'dijit/form/TextBox',
        'dijit/form/SimpleTextarea',
        'dijit/form/Button',
        'dijit/ColorPalette',

        'stalker/js/submitForm'
    ], function (Memory, Form, ValidationTextBox, TextBox, SimpleTextarea,
                 Button, ColorPalette, submitForm) {
        
        // ********************************************************************
        // Generate some default values
        var name;
        var code;
        var fg_color;
        var bg_color;
        var additional_data = {};
        var url;
        
        {% if mode=='CREATE' %}
            fg_color = '#000000';
            bg_color = '#ffffff';
            url = '{{ request.route_url('create_status')}}';
        {% elif mode=='UPDATE' %}
            name = {{ status.name }};
            code = {{ status.code }};
            fg_color = {{ status.fg_color }};
            // convert it to hex
            fg_color = '#' + fg_color.toString(16);
            bg_color = {{ status.bg_color }};
            bg_color = '#' + bg_color.toString(16);
            additional_data = {
                status_id: {{ status.id }}
            };
            url = '{{ request.route_url('update_status', id=status.id)}}';
        {% endif %}
        
        // **********************************************************************
        // Form
        var status_form = new Form({}, 'status_form');
        status_form.startup();

        var dialog = status_form.getParent();


        // **********************************************************************
        // Name
        var name_textBox = new ValidationTextBox({
            name: 'name',
            label: 'Name',
            placeHolder: 'Enter a name',
            required: true,
            value: name
        }, 'status_name');
        name_textBox.startup();


        // **********************************************************************
        // Code
        var code_textBox = new ValidationTextBox({
            name: 'code',
            label: 'Code',
            placeHolder: 'Enter a code',
            required: true,
            value: code
        }, 'status_code');
        code_textBox.startup();


        // **********************************************************************
        // FG Color
        var fg_color_colorPalette = new ColorPalette({
            name: 'fg_color',
            label: 'FG Color',
            required: true,
            value: fg_color
        }, 'status_fg_color');
        fg_color_colorPalette.startup();


        // **********************************************************************
        // BG Color
        var bg_color_colorPalette = new ColorPalette({
            name: 'bg_color',
            label: 'BG Color',
            required: true,
            value: bg_color
        }, 'status_bg_color');
        bg_color_colorPalette.startup();


        // **********************************************************************
        // Submit Button
        var submit_button = new Button({
            label: 'OK',
            type: 'button',
            onClick: function () {
                submitForm({
                    dialog: dialog,
                    form: status_form,
                    additional_data: additional_data,
                    url: url,
                    method: 'POST'
                });
            }
        }, 'status_submit_button');
        submit_button.startup();


        // **********************************************************************
        // Cancel Button
        var cancel_button = new Button({
            label: 'Cancel',
            type: 'button',
            onClick: function () {
                dialog.destroyRecursive();
            }
        }, 'status_cancel_button');
        cancel_button.startup();


    });
</script>
